import { Button } from "antd";
import React, { useState, useEffect } from "react";
import { connect, history } from "umi";
import DetailDrawer from "./components/detailDrawer";
import { PageContainer, ProTable } from "@ant-design/pro-components";
// import styles from './styles.less'

const ListPage = (props) => {
  const { dispatch } = props;
  const [visible, setVisible] = useState(false);
  const [detail, setDetail] = useState({});
  useEffect(() => {
    // dispatch({
    //   type: 'table/pageInit'
    // })
  }, []);

  const columns = [
    {
      title: "ID",
      hidden: process.env.UMI_ENV == "prod" ? true : false,
      width: 180,
      dataIndex: "id",
      hideInSearch: true,
    },
    {
      title: "城市",
      dataIndex: "cityDesc",
    },
    {
      title: "时间",
      dataIndex: "date",
    },
    {
      title: "备注",
      dataIndex: "msg",
    },
    {
      title: "操作",
      fixed: "right",
      dataIndex: "id",
      render: (id, _) => {
        return (
          <Button
            type="link"
            onClick={() => {
              history.push(`/list/detail`, {
                id,
              });
            }}
          >
            详情
          </Button>
        );
      },
    },
  ];

  return (
    <PageContainer
      breadcrumb={false}
      title={false}
      header={{
        breadcrumb: false,
      }}
    >
      <ProTable
        request={async (params) => {
          return dispatch({
            type: "table/pageInit",
            params,
          });
        }}
        pagination={{
          showSizeChanger: true,
        }}
        scroll={{ x: 1500 }}
        columns={columns}
      />
      <DetailDrawer
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        detail={detail}
      />
    </PageContainer>
  );
};

export default connect(({ list }) => ({
  ...list,
}))(ListPage);
